<?php
use frontend\modules\yii2\widgets\layouts\markdown\Markdown;
use frontend\modules\yii2\widgets\layouts\example\Example;
use yii\bootstrap\Progress;
use yii\bootstrap\Button;

$this->title = 'Progress Widget Yii-Bootstrap进度条使用教程和样式展示';
$this->registerMetaTag([
    'name' => 'keywords',
    'content' => 'progress,Yii,bootstrap3,widget,进度条,使用教程,演示'
]);
$this->registerMetaTag([
    'name' => 'description',
    'content' => 'Yii的bootstrap系列小部件中进度条小部件progress的使用教程及演示'
]);
$this->registerMetaTag([
    'name' => 'author',
    'content' => 'chenzhiwei'
]);



$html = [
    "markdown0" => <<<M0
# Progress进度条小部件的使用
> Bootstrap官网文档：[进度条](https://v3.bootcss.com/components/#progress)

默认样式的进度条示例如下：
M0,
    "example0" => [
        "html" =>
            Progress::widget([
                'percent' => 60,
                'label' => 'test',
            ])
            .
            Progress::widget([
                'percent' => 65,
                'barOptions' => ['class' => 'progress-bar-danger']
            ])
            .
            Progress::widget([
                'percent' => 70,
                'barOptions' => ['class' => 'progress-bar-warning'],
                'options' => ['class' => 'progress-striped']
            ])
            .
            Progress::widget([
                'percent' => 70,
                'barOptions' => ['class' => 'progress-bar-success'],
                'options' => ['class' => 'active progress-striped']
            ])
            .
            Progress::widget([
                'bars' => [
                    ['percent' => 30, 'options' => ['class' => 'progress-bar-danger']],
                    ['percent' => 30, 'label' => 'test', 'options' => ['class' => 'progress-bar-success']],
                    ['percent' => 35, 'options' => ['class' => 'progress-bar-warning']],
                ]
            ])
        ,
        "yii" => <<<EY0
use yii\bootstrap\Progress;
echo Progress::widget([
    'percent' => 60,
    'label' => 'test',
]);
//场景变化
echo Progress::widget([
    'percent' => 65,
    'barOptions' => [
        'class' => 'progress-bar-danger'
        //'class' => 'progress-bar-info'
        //'class' => 'progress-bar-success'
        //'class' => 'progress-bar-warning'
        //'class' => 'progress-bar-primary'
    ]
]);
//条纹效果
echo Progress::widget([
    'percent' => 70,
    'barOptions' => [
        'class' => 'progress-bar-warning'
    ],
    'options' => [
        'class' => 'progress-striped'
    ]
]);
//动画效果
echo Progress::widget([
    'percent' => 70,
    'barOptions' => [
        'class' => 'progress-bar-success'
    ],
    'options' => [
        'class' => 'active progress-striped'
    ]
]);
//堆叠效果
echo Progress::widget([
    'bars' => [
        [
            'percent' => 30, 
            'options' => [
                'class' => 'progress-bar-danger'
            ]
        ],
        [
            'percent' => 30, 
            'label' => 'test', 
            'options' => [
                'class' => 'progress-bar-success'
            ]
        ],
        [   
            'percent' => 35, 
            'options' => [
                'class' => 'progress-bar-warning'
            ]
        ],
    ]
]);
EY0,
        "bootstrap" => <<<EB0
<div id="w0" class="progress">
    <div 
        class="progress-bar" 
        role="progressbar" 
        aria-valuenow="60" 
        aria-valuemin="0" 
        aria-valuemax="100" 
        style="width:60%">
        test
        <span class="sr-only">
            60% Complete
        </span>
    </div>
</div>
EB0
    ],
    "markdown5" => <<<M0
## 显示进度百分比
因为有`.sr-only`这个类，所以`span`标签的内容不被显示出来，需要指定`label`这个属性才能显示进度，如下：
M0,
    "example1" => [
        "html" =>
            Progress::widget([
                'percent' => 65,
                'label' => '65%',
                'barOptions' => ['class' => 'progress-bar-success']
            ])
        ,
        "yii" => <<<EY0
use yii\bootstrap\Progress;
echo Progress::widget([
    'percent' => 65,
    'label' => '65%',
    'barOptions' => [
        'class' => 'progress-bar-success'
    ]
]);
EY0,
        "bootstrap" => <<<EB0
<div id="w5" class="progress">
    <div 
        class="progress-bar-success progress-bar" 
        role="progressbar" 
        aria-valuenow="65" 
        aria-valuemin="0" 
        aria-valuemax="100" 
        style="width:65%">
        65%
        <span class="sr-only">
            65% Complete
        </span>
    </div>
</div>
EB0
    ],

    "markdown6" => <<<M0
## 初始进度
在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 `min-width` 属性，示例如下：
M0,
    "example2" => [
        "html" =>
            Progress::widget([
                'percent' => 0,
                'label' => '0%',
                'barOptions' => ['class' => 'progress-bar-success', 'style' => 'min-width: 2em; ']
            ])
        ,
        "yii" => <<<EY0
use yii\bootstrap\Progress;
echo Progress::widget([
    'percent' => 0,
    'label' => '0%',
    'barOptions' => [
        'class' => 'progress-bar-success', 
        'style' => 'min-width: 2em;'
    ]
]);
EY0,
        "bootstrap" => <<<EB0
<div id="w6" class="progress">
    <div 
        class="progress-bar-success progress-bar" 
        role="progressbar" 
        aria-valuenow="0" 
        aria-valuemin="0" 
        aria-valuemax="100" 
        style="min-width: 2em; ">
        0%
        <span class="sr-only">
            0% Complete
        </span>
    </div>
</div>
EB0
    ],

    "markdown1" => <<<M0
## 调整进度
进度条一般都需要服务端的数据支持，用于表示某项任务的进度，随着任务的进行，页面显示的进度会动态发生变化，如下：
M0,
    "example3" => [
        "html" =>
            Progress::widget([
                'id' => 'cms_progress',
                'percent' => 0,
                'label' => '0%',
                'barOptions' => ['class' => 'progress-bar-success', 'style' => 'min-width: 2em; ']
            ])
            .
            Button::widget([
                "label" => "调整到50%",
                "options" => [
                    "class" => "btn btn-success",
                    "onclick" => "$('#cms_progress > .progress-bar').css({width: '50%'}).html('50%');"
                ]
            ])
        ,
        "yii" => <<<EY0
use yii\bootstrap\Progress;
echo Progress::widget([
    'percent' => 0,
    'label' => '0%',
    'barOptions' => [
        'class' => 'progress-bar-success', 
        'style' => 'min-width: 2em;'
    ]
]);
echo Button::widget([
    "label" => "调整到50%",
    "options" => [
        "class" => "btn btn-success",
        "onclick" => "$('#cms_progress > .progress-bar').css({width: '50%'}).html('50%');"
    ]
]);
EY0,
        "bootstrap" => <<<EB0
<div id="w6" class="progress">
    <div 
        class="progress-bar-success progress-bar" 
        role="progressbar" 
        aria-valuenow="0" 
        aria-valuemin="0" 
        aria-valuemax="100" 
        style="min-width: 2em; ">
        0%
        <span class="sr-only">
            0% Complete
        </span>
    </div>
</div>
<button 
    id="w7" 
    class="btn btn-success" 
    onclick="$('#cms_progress > .progress-bar').css({width: '50%'}).html('50%');">
    调整到50%
</button>
EB0
    ],

    "markdown3" => <<<M3
## Widget Api
### 父类及继承关系
![button group](/upload/articles/images/20210923160026.png)
### 属性
- `label`: string    
进度条上的文字，一般显示进度；  
- `percent`: int  
进度条的进度；  
- `barOptions`: array  
进度条的属性列表，这个选项并不是最外层的`div`，而是包含`.progress-bar`类的那个`div`标签的属性列表；    
- `bars`: array  
堆叠进度条的列表，每个子元素都是一个进度条；
M3
];

foreach($html as $name => $item){
    switch ($name) {
        case strpos($name, "example") !== false:
            echo Example::widget($item);
            break;
        case strpos($name, "markdown") !== false:
            echo Markdown::widget(["content" => $item]);
            break;
        default:
            break;
    }
}